<template>
  <div class="merchant-card-demo">
    <h2 class="demo-title">商户卡片组件演示</h2>

    <div class="demo-controls">
      <button @click="generateDemoData">生成测试数据</button>
      <label>
        数量:
        <select v-model="merchantCount">
          <option value="4">4个</option>
          <option value="8">8个</option>
          <option value="12">12个</option>
        </select>
      </label>
    </div>

    <div class="merchant-card-grid">
      <div v-for="merchant in merchants" :key="merchant.id" class="merchant-card-container">
        <MerchantCard
          :merchant="merchant"
          @edit="handleEdit"
          @manage-products="handleManageProducts"
          @toggle-status="handleToggleStatus"
        />
      </div>
    </div>

    <!-- 操作结果提示 -->
    <div v-if="actionMessage" class="action-message">
      {{ actionMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MerchantCard from './MerchantCard.vue';
import { generateMerchantData } from '@/utils/adminMock';

// 商户数据
const merchants = ref<any[]>([]);
const merchantCount = ref<string>('8');
const actionMessage = ref<string>('');

// 初始化加载数据
merchants.value = generateMerchantData(parseInt(merchantCount.value));

// 生成演示数据
const generateDemoData = () => {
  merchants.value = generateMerchantData(parseInt(merchantCount.value));
};

// 处理编辑事件
const handleEdit = (merchant: any) => {
  actionMessage.value = `编辑商户: ${merchant.name}`;
  setTimeout(() => {
    actionMessage.value = '';
  }, 3000);
};

// 处理管理产品事件
const handleManageProducts = (merchant: any) => {
  actionMessage.value = `管理商户产品: ${merchant.name}`;
  setTimeout(() => {
    actionMessage.value = '';
  }, 3000);
};

// 处理状态切换事件
const handleToggleStatus = (merchant: any) => {
  const newStatus = merchant.status === 'active' ? 'inactive' : 'active';
  const statusText = newStatus === 'active' ? '启用' : '禁用';

  // 在实际应用中，这里会调用API更新状态
  const index = merchants.value.findIndex(m => m.id === merchant.id);
  if (index !== -1) {
    merchants.value[index] = { ...merchant, status: newStatus };
  }

  actionMessage.value = `${statusText}商户: ${merchant.name}`;
  setTimeout(() => {
    actionMessage.value = '';
  }, 3000);
};
</script>

<style lang="scss" scoped>
@use 'sass:color';
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.merchant-card-demo {
  padding: $spacing-lg;

  .demo-title {
    margin: 0 0 $spacing-lg;
    font-size: $font-size-xl;
    color: $text-primary;
  }

  .demo-controls {
    margin-bottom: $spacing-lg;
    display: flex;
    gap: $spacing-md;
    align-items: center;

    button {
      padding: $spacing-xs $spacing-md;
      background-color: $primary;
      color: $white;
      border: none;
      border-radius: $border-radius-md;
      cursor: pointer;
      font-weight: $font-weight-medium;

      &:hover {
        //background-color: darken($primary, 5%);
        background-color: color.adjust($primary, $lightness: -5%);
      }
    }

    label {
      display: flex;
      align-items: center;
      gap: $spacing-xs;

      select {
        padding: $spacing-xs $spacing-sm;
        border: 1px solid $gray-300;
        border-radius: $border-radius-md;
        background-color: $white;
      }
    }
  }

  .merchant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: $spacing-lg;

    .merchant-card-container {
      height: 100%;
    }
  }

  .action-message {
    position: fixed;
    bottom: $spacing-lg;
    right: $spacing-lg;
    background-color: rgba($info, 0.9);
    color: $white;
    padding: $spacing-sm $spacing-md;
    border-radius: $border-radius-md;
    box-shadow: $shadow-md;
    z-index: $z-index-tooltip;
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// 响应式调整
@media (max-width: $breakpoint-md) {
  .merchant-card-demo {
    .merchant-card-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }
}

@media (max-width: $breakpoint-sm) {
  .merchant-card-demo {
    .merchant-card-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
